<!--
 * @Description: 流程图弹出预览
 * @Author: DHL
 * @Date: 2022-09-14 11:09:34
 * @LastEditors: DHL
 * @LastEditTime: 2022-11-28 16:25:59
-->
<template>
  <tw-drawer v-model="visible" title="流程图" size="60%" @close="handleClose">
    <previewFlowchart ref="previewFlowchartRef"></previewFlowchart>
  </tw-drawer>
</template>

<script setup lang="ts">
  import previewFlowchart from './previewFlowchart.vue'

  /**
   * 显示弹框
   */
  const visible = ref(false)

  const previewFlowchartRef = ref()

  //////////////////////////////////////////////////
  // 函数
  //////////////////////////////////////////////////

  /**
   * 打开弹框
   */
  function handleOpen(procInsId: string) {
    visible.value = true
    nextTick(() => {
      previewFlowchartRef.value.build(procInsId)
    })
  }

  /**
   * 关闭弹框
   */
  function handleClose() {
    visible.value = false
  }

  //////////////////////////////////////////////////
  // 暴露出去，父组件才可以调用到
  //////////////////////////////////////////////////
  defineExpose({
    handleOpen
  })
</script>

<style scoped lang="scss">
  .preview-flowchart-popup-wrapper {
  }
</style>
